<template>
  <view>
    <view class="sticky top-0" style="background-color: #f5f5f5">
      <view
        class="navbar"
        :style="{
          paddingTop: `${statusBarHeight + 4}px`,
        }"
      >
        <view class="icon" @click="routeBack">
          <u-icon name="arrow-left" size="40rpx" color="#181818"></u-icon>
        </view>
        <view style="width: 460rpx">
          <u-search
            placeholder="请输入关键词"
            bgColor="#EBEBEB"
            :showAction="false"
            v-model="keyword"
          ></u-search>
        </view>
      </view>
      <view class="mr-10 mt-10">
        <u-tabs
          :list="tabsList"
          lineColor="#67B609"
          lineWidth="40rpx"
          lineHeight="6rpx"
          :scrollable="false"
          @click="tabsClick"
          :inactiveStyle="{
            color: '#656565',
            fontSize: '30rpx',
            fontWeight: '500',
          }"
          :activeStyle="{
            color: '#181818',
            fontSize: '32rpx',
            fontWeight: 'bold',
          }"
        ></u-tabs>
      </view>
    </view>
    <view class="main">
      <view class="item" v-for="(item, index) in orderListDetails" :key="index">
        <view class="flex justify-content_space-between">
          <view class="text-28 font-medium c_333333"
            >订单编号：{{ item.orderId }}</view
          >
          <view class="text-28 font-medium">{{
            statusText(item.status, item.paid)
          }}</view>
        </view>
        <view @click="route_details(item.unique)">
          <view class="page-classify-right-content-item">
            <image
              style="
                width: 190rpx;
                height: 190rpx;
                border-radius: 16rpx;
                margin-right: 20rpx;
                flex-shrink: 0;
              "
              src="https://cdn.uviewui.com/uview/swiper/swiper1.png"
              mode="aspectFill"
            ></image>
            <view class="page-classify-right-content-item-info">
              <view class="page-classify-right-content-item-info-title">
                {{ item.mark }}
              </view>
              <view class="page-classify-right-content-item-info-doc">
                约3斤，毛重6斤
              </view>
              <view class="page-classify-right-content-item-info-price">
                <view>
                  <text style="font-size: 24rpx">￥</text>
                  {{ item.payPostage }}
                </view>
                <view class="text-24" style="color: #666666"
                  >x{{ item.totalNum }}</view
                >
              </view>
            </view>
          </view>
        </view>
        <view
          class="flex justify-content_space-between align-item_center mt-30"
        >
          <view class="text-26 font-medium" style="color: #a1a1a1"
            >共{{ item.totalNum }}件商品</view
          >
          <view class="text-28 font-medium" style="color: #000000"
            >合计<text class="text-32">￥{{ item.totalPrice }}</text></view
          >
        </view>
        <view
          class="operation flex mt-40"
          v-if="item.status !== 0 || item.paid == 0"
        >
          <view
            class="defaultBtn"
            @click="deleteOrder(item.unique)"
            v-if="item.status === 3"
            >删除订单</view
          >
          <view
            class="defaultBtn"
            @click="cancelOrder(item.orderId)"
            v-if="item.status === 0 || item.status === 1"
            >取消订单</view
          >
          <view class="defaultBtn" @click="daikaifa" v-else>查看物流</view>
          <view
            class="prmaryBtn ml-24"
            v-if="item.paid === 1"
            @click="route_details(item.unique)"
            >再次购买</view
          >
          <view class="prmaryBtn ml-24" v-if="item.paid === 0">立即支付</view>
        </view>
      </view>
    </view>
    <u-gap height="60rpx"></u-gap>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      keyword: "",
      tabsList: [
        {
          name: "全部",
        },
        {
          name: "待支付",
        },
        {
          name: "待发货",
        },
        {
          name: "已发货",
        },
        {
          name: "已完成",
        },
      ],
      typeIndex: -1,
      orderListDetails: null,
    };
  },
  onLoad() {
    this.orderList();
    this.statusBarHeight = uni.$statusBarHeight;
  },
  methods: {
    daikaifa() {
      uni.showToast({
        title: "待开发!",
        icon: "none",
        duration: 2000,
      });
    },
    cancelOrder(orderId) {
      this.$iApi
        .cancelOrder({
          id: orderId,
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            uni.showToast({
              title: "操作成功!",
              icon: "success",
              duration: 2000,
            });
          }
        });
    },
    deleteOrder(unique) {
      this.$iApi
        .deleteOrder({
          uni: unique,
        })
        .then((res) => {
          console.log(res);
          if (res.status === 200) {
            uni.showToast({
              title: "删除成功!",
              icon: "success",
              duration: 2000,
            });
          }
        });
    },
    tabsClick(item) {
      console.log("tabs", item);
      this.typeIndex = item.index;
      switch (item.index) {
        case 0:
          this.typeIndex = -1;
          return this.orderList();
        case 1:
          this.typeIndex = 0;
          return this.orderList();
        case 2:
          this.typeIndex = 1;
          return this.orderList();
        case 3:
          this.typeIndex = 2;
          return this.orderList();
        case 4:
          this.typeIndex = 4;
          return this.orderList();
        default:
          this.typeIndex = -1;
      }
    },
    orderList() {
      this.$iApi
        .orderList({
          type: this.typeIndex,
          page: 1,
          limit: 10,
        })
        .then((res) => {
          this.orderListDetails = res.data;
          console.log(this.orderListDetails);
        });
    },
    routeBack() {
      uni.navigateBack();
    },
    route_details(key) {
      uni.navigateTo({
        url: `/pages/order/details?key=${key}`,
      });
    },
  },
  computed: {
    statusText() {
      return (status, paid) => {
        if (paid === 0) {
          return "待支付";
        } else {
          switch (status) {
            case 0:
              return "待发货";
            case 1:
              return "已发货";
            case 2:
              return "已发货";
            case 3:
              return "已完成";
            case -1:
              return "已退款";
            case -2:
              return "退货成功";
            default:
              return "未知状态";
          }
        }
      };
    },
  },
};
</script>
<style>
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.main {
  .item {
    width: 690rpx;
    background: #ffffff;
    padding: 32rpx 24rpx 40rpx;
    box-sizing: border-box;
    margin: 21rpx auto 0;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .operation {
      justify-content: flex-end;

      .defaultBtn {
        width: 166rpx;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-weight: 500;
        font-size: 28rpx;
        color: #181818;
        border-radius: 200rpx 200rpx 200rpx 200rpx;
        border: 2rpx solid #cccccc;
      }

      .prmaryBtn {
        @extend .defaultBtn;
        background-color: #67b609;
        border: 2rpx solid #67b609;
        color: #ffffff;
      }
    }
  }

  .page-classify-right-content-item {
    // width: 690rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    box-sizing: border-box;
    display: flex;
    align-content: center;
    margin: 24rpx 0 0;

    &-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 100%;

      &-title {
        width: 100%;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
      }

      &-doc {
        width: max-content;
        background: rgba(237, 123, 66, 0.06);
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        border: 1rpx solid rgba(237, 123, 66, 0.3);
        padding: 6rpx 10rpx;
        font-weight: 400;
        font-size: 24rpx;
        color: #ed7b42;
        line-height: 30rpx;
      }

      &-price {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 500;
        font-size: 32rpx;
        color: #ed7b42;
      }
    }
  }
}

.navbar {
  width: 100vw;
  height: 64rpx;
  z-index: 2;
  display: flex;
  align-items: center;

  .icon {
    padding-top: 6rpx;
    margin-left: 30rpx;
    margin-right: 20rpx;
  }
}
</style>
